import{d as t,M as l,A as a,h as r}from"./Anchors-CRD96j4l.js";import{D as s,a as i}from"./Demo-Ck8WGKWN.js";import"./index-BpvWz174.js";const o={path:"/form/table",name:"table",title:"Table 表格"};function n(d){const e={a:"a",br:"br",code:"code",h1:"h1",h2:"h2",p:"p",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...d.components};return l(r,{children:[l("div",{class:"sys-ctx-main-left",children:[l(e.h1,{id:"sp-",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-",children:t(e.span,{className:"icon icon-link"})}),o.title]}),l(e.h2,{id:"sp-demos",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-demos",children:t(e.span,{className:"icon icon-link"})}),"代码演示 "]}),t(s,{}),t(i,{id:"base",title:"基础用法",src:"1base.demo.tsx",code:`import { Table } from "cui-solid"

export default () => {
    const columns = [
        {type: 'index', title: '序号', width: '80px'},
        {name: 'name', title: '名称', width: '150px'},
        {name: 'x', title: 'X'},
        {name: 'y', title: 'Y'},
        {name: 'date', title: '日期', width: '200px'},
    ];

    const data = [];
    for (let i = 0; i < 5; i++) {
        data.push({
            id: i,
            name: 'name_' + i,
            x: Math.random() + 100,
            y: Math.random() + 30,
            _disabled: i % 3 === 0,
            date: new Date().toLocaleDateString()
        });
    }

    return <Table columns={columns} data={data}/>
}`,scopes:void 0,children:l(e.p,{children:["基础用法， ",t(e.code,{className:"sp-inline-code",children:"columns"})," 中 ",t(e.code,{className:"sp-inline-code",children:"type"})," 支持 ",t(e.code,{className:"sp-inline-code",children:"index"})," 和 ",t(e.code,{className:"sp-inline-code",children:"checkbox"})]})}),t(i,{id:"border",title:"边框",src:"2border.demo.tsx",code:`import { Table } from "cui-solid"

export default () => {
    const columns = [
        {type: 'index', title: '序号', width: '80px'},
        {name: 'name', title: '名称', width: '150px'},
        {name: 'x', title: 'X'},
        {name: 'y', title: 'Y'},
        {name: 'date', title: '日期', width: '200px'},
    ];

    const data = [];
    for (let i = 0; i < 5; i++) {
        data.push({
            id: i,
            name: 'name_' + i,
            x: Math.random() + 100,
            y: Math.random() + 30,
            _disabled: i % 3 === 0,
            date: new Date().toLocaleDateString()
        });
    }

    return <Table columns={columns} data={data} border/>
}`,scopes:void 0,children:l(e.p,{children:["添加 ",t(e.code,{className:"sp-inline-code",children:"border"})," 支持边框"]})}),t(i,{id:"stripe",title:"斑马纹",src:"3stripe.demo.tsx",code:`import { Table } from "cui-solid"

export default () => {
    const columns = [
        {type: 'index', title: '序号', width: '80px'},
        {name: 'name', title: '名称', width: '150px'},
        {name: 'x', title: 'X'},
        {name: 'y', title: 'Y'},
        {name: 'date', title: '日期', width: '200px'},
    ];

    const data = [];
    for (let i = 0; i < 5; i++) {
        data.push({
            id: i,
            name: 'name_' + i,
            x: Math.random() + 100,
            y: Math.random() + 30,
            _disabled: i % 3 === 0,
            date: new Date().toLocaleDateString()
        });
    }

    return <Table columns={columns} data={data} border stripe/>
}`,scopes:void 0,children:l(e.p,{children:["添加 ",t(e.code,{className:"sp-inline-code",children:"stripe"})," 支持斑马纹"]})}),t(i,{id:"fixedHeader",title:"固定表头",src:"4fixedHeader.demo.tsx",code:`import { Table } from "cui-solid"

export default () => {
    const columns = [
        {type: 'index', title: '序号', width: '80px'},
        {name: 'name', title: '名称', width: '150px'},
        {name: 'x', title: 'X'},
        {name: 'y', title: 'Y'},
        {name: 'date', title: '日期', width: '200px'},
    ];

    const data = [];
    for (let i = 0; i < 5; i++) {
        data.push({
            id: i,
            name: 'name_' + i,
            x: Math.random() + 100,
            y: Math.random() + 30,
            _disabled: i % 3 === 0,
            date: new Date().toLocaleDateString()
        });
    }

    return <Table columns={columns} data={data} border stripe height={200}/>
}`,scopes:void 0,children:l(e.p,{children:["通过设置属性 ",t(e.code,{className:"sp-inline-code",children:"height"})," 给表格指定高度后，会自动固定表头。"]})}),t(i,{id:"fixedCol",title:"固定列",src:"5fixedCol.demo.tsx",code:`import { Table } from "cui-solid"

export default () => {
    const columns = [
        {type: 'index', title: '序号', width: '80px', fixed: 'left'},
        {name: 'name', title: '名称', width: '150px', fixed: 'left'},
        {name: 'x', title: 'X', width: '300px'},
        {name: 'y', title: 'Y', width: '300px'},
        {name: 'date', title: '日期', width: '200px', fixed: 'right'},
    ];

    const data = [];
    for (let i = 0; i < 5; i++) {
        data.push({
            id: i,
            name: 'name_' + i,
            x: Math.random() + 100,
            y: Math.random() + 30,
            _disabled: i % 3 === 0,
            date: new Date().toLocaleDateString()
        });
    }

    return <div style={{width: '800px'}}>
        <Table columns={columns} data={data} border stripe height={200}/>
    </div>
}`,scopes:void 0,children:l(e.p,{children:["通过给数据 ",t(e.code,{className:"sp-inline-code",children:"columns"})," 的项设置 ",t(e.code,{className:"sp-inline-code",children:"fixed"})," 为 ",t(e.code,{className:"sp-inline-code",children:"left"})," 或 ",t(e.code,{className:"sp-inline-code",children:"right"})," ，可以左右固定需要的列。"]})}),t(i,{id:"highlight",title:"行高亮",src:"6highlight.demo.tsx",code:`import { Button, Space, Table } from "cui-solid"

export default () => {
    const columns = [
        {type: 'index', title: '序号', width: '80px', fixed: 'left'},
        {name: 'name', title: '名称', width: '150px', fixed: 'left'},
        {name: 'x', title: 'X', width: '300px'},
        {name: 'y', title: 'Y', width: '300px'},
        {name: 'date', title: '日期', width: '200px', fixed: 'right'},
    ];

    const data = [];
    for (let i = 0; i < 5; i++) {
        data.push({
            id: i,
            name: 'name_' + i,
            x: Math.random() + 100,
            y: Math.random() + 30,
            _disabled: i % 3 === 0,
            date: new Date().toLocaleDateString()
        });
    }
    let table: any;

    return <Space dir="v">
        <Table columns={columns} data={data} border highlight ref={table}/>
        <div>
            <Button type="primary" onClick={() => {
                table.clearSelect();
            }}>清除高亮</Button>
        </div>
    </Space>
}`,scopes:void 0,children:l(e.p,{children:["添加 ",t(e.code,{className:"sp-inline-code",children:"highlight"})," 选择一行的时候可以高亮显示, 可通过引用的 ",t(e.code,{className:"sp-inline-code",children:"clearSelect"})," 方法进行清除"]})}),t(i,{id:"size",title:"小尺寸",src:"7size.demo.tsx",code:`import { Table } from "cui-solid"

export default () => {
    const columns = [
        {type: 'index', title: '序号', width: '80px', fixed: 'left'},
        {name: 'name', title: '名称', width: '150px', fixed: 'left'},
        {name: 'x', title: 'X', width: '300px'},
        {name: 'y', title: 'Y', width: '300px'},
        {name: 'date', title: '日期', width: '200px', fixed: 'right'},
    ];

    const data = [];
    for (let i = 0; i < 5; i++) {
        data.push({
            id: i,
            name: 'name_' + i,
            x: Math.random() + 100,
            y: Math.random() + 30,
            _disabled: i % 3 === 0,
            date: new Date().toLocaleDateString()
        });
    }

    return <Table columns={columns} data={data} size="small" border />
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"size"})," 支持 ",t(e.code,{className:"sp-inline-code",children:"small"})]})}),t(i,{id:"loading",title:"加载中",src:"8loading.demo.tsx",code:`import { Button, Space, Table } from "cui-solid"
import { createSignal } from "solid-js";

export default () => {
    const [loading, setLoading] = createSignal(false);

    const columns = [
        {type: 'index', title: '序号', width: '80px', fixed: 'left'},
        {name: 'name', title: '名称', width: '150px', fixed: 'left'},
        {name: 'x', title: 'X', width: '300px'},
        {name: 'y', title: 'Y', width: '300px'},
        {name: 'date', title: '日期', width: '200px', fixed: 'right'},
    ];

    const data = [];
    for (let i = 0; i < 5; i++) {
        data.push({
            id: i,
            name: 'name_' + i,
            x: Math.random() + 100,
            y: Math.random() + 30,
            _disabled: i % 3 === 0,
            date: new Date().toLocaleDateString()
        });
    }

    return <Space dir="v">
        <Table columns={columns} data={data} size="small" border loading={loading()}/>
        <div>
            <Button type="primary" onClick={() => {
                setLoading(!loading());
            }}>加载/完成</Button>
        </div>
    </Space>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"loading"})," 属性可以在table上面覆盖一层加载的遮罩"]})}),t(i,{id:"span",title:"行列合并",src:"9span.demo.tsx",code:`import type { ColumnProps} from "cui-solid";
import { Space, Table } from "cui-solid"

export default () => {
    const columns = [
        {type: 'index', title: '序号', width: '80px', fixed: 'left'},
        {name: 'name', title: '名称', width: '150px', fixed: 'left'},
        {name: 'x', title: 'X', width: '300px'},
        {name: 'y', title: 'Y', width: '300px'},
        {name: 'date', title: '日期', width: '200px', fixed: 'right'},
    ];

    const data = [];
    for (let i = 0; i < 5; i++) {
        data.push({
            id: i,
            name: 'name_' + i,
            x: Math.random() + 100,
            y: Math.random() + 30,
            _disabled: i % 3 === 0,
            date: new Date().toLocaleDateString()
        });
    }

    return <Space dir="v">
        <Table columns={columns} data={data} border spanMethod={(row: any, col: ColumnProps, rowIndex: number, columnIndex: number) => {
            if (rowIndex === 0 && columnIndex === 0) {
                return [1, 2];
            } else if (rowIndex === 0 && columnIndex === 1) {
                return [0, 0];
            }
            if (rowIndex === 2 && columnIndex === 0) {
                return [2, 1];
            } else if (rowIndex === 3 && columnIndex === 0) {
                return [0, 0];
            }
        }}/>
    </Space>
}`,scopes:void 0,children:l(e.p,{children:["设置属性 ",t(e.code,{className:"sp-inline-code",children:"spanMethod"})," 可以指定合并行或列的算法。"]})}),t(i,{id:"checkbox",title:"选择框",src:"10checkbox.demo.tsx",code:`import { Button, Space, Table } from "cui-solid"

export default () => {
    const columns = [
        {type: 'checkbox', width: '55px' },
        {name: 'name', title: '名称', width: '150px'},
        {name: 'x', title: 'X', width: '300px'},
        {name: 'y', title: 'Y', width: '300px'},
        {name: 'date', title: '日期', width: '200px'},
        {name: '_op', title: '操作', width: '150px', render: (v: any, column: any, row: any) => {
            return <Space>
                <Button type="text" size="small" ghost>添加</Button>
                <Button type="text" size="small" ghost>修改</Button>
            </Space>
        }}
    ];

    const data = [];
    for (let i = 0; i < 5; i++) {
        data.push({
            id: i,
            name: 'name_' + i,
            x: Math.random() + 100,
            y: Math.random() + 30,
            _disabled: i % 3 === 0,
            date: new Date().toLocaleDateString()
        });
    }

    return <Space dir="v">
        <Table columns={columns} data={data} />
    </Space>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"column"})," 中设置 ",t(e.code,{className:"sp-inline-code",children:"type"})," 为 ",t(e.code,{className:"sp-inline-code",children:"checkbox"})," 可以添加选择列, 通过 ",t(e.code,{className:"sp-inline-code",children:"render"})," 函数可自定义渲染内容"]})}),t(i,{id:"sort",title:"排序",src:"11sort.demo.tsx",code:`import { Button, Space, Table } from "cui-solid"

export default () => {
    const columns = [
        {name: 'name', title: '名称', width: '150px', sort: true},
        {name: 'x', title: 'X', width: '300px', sort: true},
        {name: 'y', title: 'Y', width: '300px'},
        {name: 'date', title: '日期', width: '200px'},
        {name: '_op', title: '操作', width: '150px', render: (v: any, column: any, row: any) => {
            return <Space>
                <Button type="text" size="small" ghost>添加</Button>
                <Button type="text" size="small" ghost>修改</Button>
            </Space>
        }}
    ];

    const data = [];
    for (let i = 0; i < 5; i++) {
        data.push({
            id: i,
            name: 'name_' + i,
            x: Math.random() + 100,
            y: Math.random() + 30,
            _disabled: i % 3 === 0,
            date: new Date().toLocaleDateString()
        });
    }

    return <Space dir="v">
        <Table columns={columns} data={data} />
    </Space>
}`,scopes:void 0,children:l(e.p,{children:["通过给 ",t(e.code,{className:"sp-inline-code",children:"columns"})," 数据的项，设置 ",t(e.code,{className:"sp-inline-code",children:"sort: true"}),"，即可对该列数据进行排序。",t(e.br,{}),`
`,"通过给某一列设置 ",t(e.code,{className:"sp-inline-code",children:"sortType"})," 可以在初始化时使用排序。",t(e.br,{}),`
`,"如果使用远程排序，可以设置 ",t(e.code,{className:"sp-inline-code",children:"sortable: 'custom'"}),"，然后在触发排序事件 ",t(e.code,{className:"sp-inline-code",children:"onSort"})," 后，进行远程排序，并手动设置新的 data"]})}),t(i,{id:"resize",title:"拖拽列宽",src:"12resize.demo.tsx",code:`import { Button, Space, Table } from "cui-solid"

export default () => {
    const columns = [
        {name: 'name', title: '名称', width: '150px', resize: true},
        {name: 'x', title: 'X', width: '300px', resize: true},
        {name: 'y', title: 'Y', width: '300px', resize: true},
        {name: 'date', title: '日期', width: '200px'},
        {name: '_op', title: '操作', width: '150px', render: (v: any, column: any, row: any) => {
            return <Space>
                <Button type="text" size="small" ghost>添加</Button>
                <Button type="text" size="small" ghost>修改</Button>
            </Space>
        }}
    ];

    const data = [];
    for (let i = 0; i < 5; i++) {
        data.push({
            id: i,
            name: 'name_' + i,
            x: Math.random() + 100,
            y: Math.random() + 30,
            _disabled: i % 3 === 0,
            date: new Date().toLocaleDateString()
        });
    }

    return <Space dir="v" style={{width: '100%', overflow: 'auto'}}>
        <Table columns={columns} data={data} border/>
    </Space>
}`,scopes:void 0,children:l(e.p,{children:["给某一列设置属性 ",t(e.code,{className:"sp-inline-code",children:"resize"})," 为 true，可以拖拽调整该列的宽度，需开启 ",t(e.code,{className:"sp-inline-code",children:"border"})," 属性，且该列设置了 ",t(e.code,{className:"sp-inline-code",children:"width"})," 属性。"]})}),t(i,{id:"data",title:"动态数据",src:"13data.demo.tsx",code:`import { Button, Space, Table } from "cui-solid"
import { createSignal } from "solid-js";

export default () => {
    const columns = [
        {
            title: 'Name',
            name: 'name',
            width: '100px',
        },
        {
            title: 'Age',
            name: 'age',
            width: '100px',
        },
        {
            title: 'Address',
            name: 'address',
            width: '300px',
        }
    ];

    const [data, setData] = createSignal([
        {
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park',
            job: 'Data engineer',
            interest: 'badminton',
            birthday: '1991-05-14',
            book: 'Steve Jobs',
            movie: 'The Prestige',
            music: 'I Cry',
        },
        {
            name: 'Jim Green',
            age: 25,
            address: 'London No. 1 Lake Park',
            job: 'Data Scientist',
            interest: 'volleyball',
            birthday: '1989-03-18',
            book: 'My Struggle',
            movie: 'Roman Holiday',
            music: 'My Heart Will Go On'
        },
        {
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            job: 'Data Product Manager',
            interest: 'tennis',
            birthday: '1992-01-31',
            book: 'Win',
            movie: 'Jobs',
            music: 'Don’t Cry'
        },
        {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            job: 'Data Analyst',
            interest: 'snooker',
            birthday: '1988-7-25',
            book: 'A Dream in Red Mansions',
            movie: 'A Chinese Ghost Story',
            music: 'actor'
        }
    ]);

    const [loading, setLoading] = createSignal(false);

    return <Space dir="v">
        <Table columns={columns} data={data()} border loading={loading()}/>
        <div>
            <Button type="primary" onClick={() => {
                setLoading(true);
                setTimeout(() => {
                    const data: any[] = [];
                    for (let i = 0; i < Math.random() * 10; i++) {
                        data.push({
                            name: 'name_' + i,
                            age: Math.round(10 + Math.random() * 50),
                            address: 'address ' + i
                        });
                    }
                    setData(data);
                    setLoading(false);
                }, 500)
            }}>请求数据</Button>
        </div>
    </Space>
}`,scopes:void 0,children:t(e.p,{children:"动态设置data属性"})}),t(i,{id:"tree",title:"树状",src:"14tree.demo.tsx",code:`import { Space, Table } from "cui-solid"

export default () => {
    const columns = [
        {
            title: 'Name',
            name: 'name',
            tree: true,
            width: '100px',
        },
        {
            title: 'Age',
            name: 'age',
            width: '100px',
        },
        {
            title: 'Address',
            name: 'address',
            width: '300px',
        }
    ];

    const data = [
        {
            id: '100',
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park'
        },
        {
            id: '101',
            name: 'Jim Green',
            age: 24,
            address: 'London No. 1 Lake Park',
            _showChildren: true,
            children: [
                {
                    id: '10100',
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park'
                },
                {
                    id: '10101',
                    name: 'Joe Blackn',
                    age: 30,
                    address: 'Sydney No. 1 Lake Park'
                },
                {
                    id: '10102',
                    name: 'Jon Snow',
                    age: 26,
                    address: 'Ottawa No. 2 Lake Park',
                    children: [
                        {
                            id: '1010200',
                            name: 'Jim Green',
                            age: 24,
                            address: 'New York No. 1 Lake Park'
                        }
                    ]
                }
            ]
        },
        {
            id: '102',
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park'
        },
        {
            id: '103',
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park'
        }
    ];

    return <Space dir="v">
        <Table columns={columns} data={data} border />
    </Space>
}`,scopes:void 0,children:l(e.p,{children:["当数据中含有 ",t(e.code,{className:"sp-inline-code",children:"children"})," 字段，会以树形数据显示。",t(e.br,{}),`
`,"在 column 开启属性 ",t(e.code,{className:"sp-inline-code",children:"tree"}),"，则该列会显示展开/收起图标。",t(e.br,{}),`
`,"设置 data 属性 ",t(e.code,{className:"sp-inline-code",children:"_showChildren"}),"，默认会展开子数据。"]})}),t(i,{id:"expand",title:"展开",src:"15expand.demo.tsx",code:`import { Space, Table } from "cui-solid"

export default () => {
    const columns = [
        {
            type: 'expand',
            width: '50px',
            render: (row: any) => {
                return <div>{row.name}</div>
            }
        },
        {
            title: 'Name',
            name: 'name',
            width: '100px',
            resize: true,
        },
        {
            title: 'Age',
            name: 'age',
            width: '100px',
            resize: true,
        },
        {
            title: 'Address',
            name: 'address',
            width: '300px',
        },
        {
            title: 'Job',
            name: 'job',
            width: '200px',
        },
        {
            title: 'Book',
            name: 'book',
            width: '250px',
        }
    ];

    const data = [
        {
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park',
            job: 'Data engineer',
            interest: 'badminton',
            birthday: '1991-05-14',
            book: 'Steve Jobs',
            movie: 'The Prestige',
            music: 'I Cry',
        },
        {
            name: 'Jim Green',
            age: 25,
            address: 'London No. 1 Lake Park',
            job: 'Data Scientist',
            interest: 'volleyball',
            birthday: '1989-03-18',
            book: 'My Struggle',
            movie: 'Roman Holiday',
            music: 'My Heart Will Go On'
        },
        {
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park',
            job: 'Data Product Manager',
            interest: 'tennis',
            birthday: '1992-01-31',
            book: 'Win',
            movie: 'Jobs',
            music: 'Don’t Cry'
        },
        {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park',
            job: 'Data Analyst',
            interest: 'snooker',
            birthday: '1988-7-25',
            book: 'A Dream in Red Mansions',
            movie: 'A Chinese Ghost Story',
            music: 'actor'
        }
    ];

    return <Space dir="v">
        <Table columns={columns} data={data} border />
    </Space>
}`,scopes:void 0,children:l(e.p,{children:["当表格内容较多不能一次性完全展示时使用。",t(e.br,{}),`
`,"通过给 columns 数据设置一项，指定 ",t(e.code,{className:"sp-inline-code",children:"type: 'expand'"}),"，即可开启扩展功能。",t(e.br,{}),`
`,"渲染展开区域与自定义列模板方法类似，使用 render 函数。"]})}),t(i,{id:"largedata",title:"大列表",src:"16largedata.demo.tsx",code:`import { Space, Table } from "cui-solid"

export default () => {
    const columns = [
        {type: 'index', title: '序号', width: '80px'},
        {name: 'name', title: '名称', width: '150px'},
        {name: 'x', title: 'X'},
        {name: 'y', title: 'Y'},
        {name: 'date', title: '日期', width: '200px'}
    ];

    const largedata = [];
    for (let i = 0; i < 1000; i++) {
        largedata.push({
            id: i,
            name: 'name_' + i,
            x: Math.random() + 100,
            y: Math.random() + 30,
            _disabled: i % 3 === 0,
            date: new Date().toLocaleDateString()
        });
    }

    return <Space dir="v">
        <Table columns={columns} data={largedata} border virtual height={300}/>
    </Space>
}`,scopes:void 0,children:l(e.p,{children:["当表格数据量较大时为了提升渲染性能，可以使用虚拟列表  通过指定 ",t(e.code,{className:"sp-inline-code",children:"virtual"})," 属性并设置 ",t(e.code,{className:"sp-inline-code",children:"height"}),"，即可高性能渲染表格"]})}),t(i,{id:"selectRowKeys",title:"勾选可控",src:"17selectRowKeys.demo.tsx",code:`import { Button, Space, Table } from "cui-solid"
import { createSignal } from "solid-js";

export default () => {
    const columns = [
        {type: 'checkbox', width: '55px' },
        {name: 'name', title: '名称', width: '150px'},
        {name: 'x', title: 'X', width: '300px'},
        {name: 'y', title: 'Y', width: '300px'},
        {name: 'date', title: '日期', width: '200px'},
        {name: '_op', title: '操作', width: '150px', render: (v: any, column: any, row: any) => {
            return <Space>
                <Button type="text" size="small" ghost>添加</Button>
                <Button type="text" size="small" ghost>修改</Button>
            </Space>
        }}
    ];

    const data = [];
    for (let i = 0; i < 5; i++) {
        data.push({
            id: i,
            name: 'name_' + i,
            x: Math.random() + 100,
            y: Math.random() + 30,
            _disabled: i % 3 === 0,
            date: new Date().toLocaleDateString()
        });
    }
    type KeyType = string|number;
    const [selectedRowKeys, setSelectedRowKeys] = createSignal<KeyType[]>([]);

    return <Space dir="v">
        <Table columns={columns} data={data} selectedRowKeys={[selectedRowKeys, setSelectedRowKeys]}/>
        <div>
            <Button type="primary" onClick={() => {
                setSelectedRowKeys([1,2]); // 清除选中
            }}>选中</Button>
        </div>
    </Space>
}`,scopes:void 0,children:l(e.p,{children:["表格 ",t(e.code,{className:"sp-inline-code",children:"selectRowKeys"})," 为可控属性，通过设置 ",t(e.code,{className:"sp-inline-code",children:"selectRowKeys"})," 属性，可以实现勾选功能。"]})}),l(e.h2,{id:"props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#props",children:t(e.span,{className:"icon icon-link"})}),"属性 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"classList"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"class"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"style"}),t(e.td,{style:{textAlign:"left"},children:"自定义样式"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"rowKey"}),t(e.td,{style:{textAlign:"left"},children:"指定数据的key"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"id"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"selectedRowKeys"}),t(e.td,{style:{textAlign:"left"},children:"勾选数据双向绑定"}),t(e.td,{style:{textAlign:"left"},children:"Signal"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"columns"}),t(e.td,{style:{textAlign:"left"},children:"表头字段信息"}),t(e.td,{style:{textAlign:"left"},children:"Array"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"data"}),t(e.td,{style:{textAlign:"left"},children:"数据体"}),t(e.td,{style:{textAlign:"left"},children:"Array"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"height"}),t(e.td,{style:{textAlign:"left"},children:"表格最大高度，超出表头固定"}),t(e.td,{style:{textAlign:"left"},children:"number"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"border"}),t(e.td,{style:{textAlign:"left"},children:"边框"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"stripe"}),t(e.td,{style:{textAlign:"left"},children:"斑马条纹"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"highlight"}),t(e.td,{style:{textAlign:"left"},children:"点击高亮选中的行"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"size"}),t(e.td,{style:{textAlign:"left"},children:"大小"}),t(e.td,{style:{textAlign:"left"},children:"small"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"loading"}),t(e.td,{style:{textAlign:"left"},children:"加载状态"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"spanMethod"}),t(e.td,{style:{textAlign:"left"},children:"行列合并的钩子"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"onRowSelect"}),t(e.td,{style:{textAlign:"left"},children:"行选中事件 返回item"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"onRowChecked"}),t(e.td,{style:{textAlign:"left"},children:"行选中事件 返回item"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"onCheckedAll"}),t(e.td,{style:{textAlign:"left"},children:"全选事件, 所有选中的数据data"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"onSort"}),t(e.td,{style:{textAlign:"left"},children:"排序事件, column, sotyType"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"ref"}),t(e.td,{style:{textAlign:"left"},children:"表格组件的引用"}),t(e.td,{style:{textAlign:"left"},children:"any"}),t(e.td,{style:{textAlign:"left"}})]})]})]}),l(e.h2,{id:"column_props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#column_props",children:t(e.span,{className:"icon icon-link"})}),"Column 属性 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"name"}),t(e.td,{style:{textAlign:"left"},children:"字段名称"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"title"}),t(e.td,{style:{textAlign:"left"},children:"显示文案"}),t(e.td,{style:{textAlign:"left"},children:"JSXElement"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"render"}),t(e.td,{style:{textAlign:"left"},children:"自定义渲染函数， v, column, row"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"type"}),t(e.td,{style:{textAlign:"left"},children:"字段类型 index, checkbox、 expend"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"width"}),t(e.td,{style:{textAlign:"left"},children:"字段宽度"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"resize"}),t(e.td,{style:{textAlign:"left"},children:"可缩放宽度"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"sort"}),t(e.td,{style:{textAlign:"left"},children:"支持排序的列 custom"}),t(e.td,{style:{textAlign:"left"},children:"boolean  |  string"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"sortMethod"}),t(e.td,{style:{textAlign:"left"},children:"自定义排序方法 参数， a, b"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"sortType"}),t(e.td,{style:{textAlign:"left"},children:"排序方式 asc | desc | ''"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"fixed"}),t(e.td,{style:{textAlign:"left"},children:"固定列的位置 left  |  right"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"tree"}),t(e.td,{style:{textAlign:"left"},children:"改列为树状字段， 展示展开收缩按钮"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]})]})]}),l(e.h2,{id:"events",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#events",children:t(e.span,{className:"icon icon-link"})}),"事件 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"事件名称"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"返回值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"onRowSelect"})}),t(e.td,{style:{textAlign:"left"},children:"行选中事件"}),t(e.td,{style:{textAlign:"left"},children:"item"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"onRowChecked"})}),t(e.td,{style:{textAlign:"left"},children:"行选中事件"}),t(e.td,{style:{textAlign:"left"},children:"item"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"onCheckedAll"})}),t(e.td,{style:{textAlign:"left"},children:"全选事件"}),t(e.td,{style:{textAlign:"left"},children:"data"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"onSort"})}),t(e.td,{style:{textAlign:"left"},children:"排序事件"}),t(e.td,{style:{textAlign:"left"},children:"column, sotyType"})]})]})]})]}),`
`,`
`,`
`,t(a,{data:[{id:"",depth:1,title:""},{id:"sp-demos",depth:2,title:"代码演示"},{id:"base",title:"基础用法",src:"1base.demo.tsx"},{id:"border",title:"边框",src:"2border.demo.tsx"},{id:"stripe",title:"斑马纹",src:"3stripe.demo.tsx"},{id:"fixedHeader",title:"固定表头",src:"4fixedHeader.demo.tsx"},{id:"fixedCol",title:"固定列",src:"5fixedCol.demo.tsx"},{id:"highlight",title:"行高亮",src:"6highlight.demo.tsx"},{id:"size",title:"小尺寸",src:"7size.demo.tsx"},{id:"loading",title:"加载中",src:"8loading.demo.tsx"},{id:"span",title:"行列合并",src:"9span.demo.tsx"},{id:"checkbox",title:"选择框",src:"10checkbox.demo.tsx"},{id:"sort",title:"排序",src:"11sort.demo.tsx"},{id:"resize",title:"拖拽列宽",src:"12resize.demo.tsx"},{id:"data",title:"动态数据",src:"13data.demo.tsx"},{id:"tree",title:"树状",src:"14tree.demo.tsx"},{id:"expand",title:"展开",src:"15expand.demo.tsx"},{id:"largedata",title:"大列表",src:"16largedata.demo.tsx"},{id:"selectRowKeys",title:"勾选可控",src:"17selectRowKeys.demo.tsx"},{id:"props",depth:2,title:"属性"},{id:"column_props",depth:2,title:"Column 属性"},{id:"events",depth:2,title:"事件"}]})]})}function x(d={}){const{wrapper:e}=d.components||{};return e?t(e,{...d,children:t(n,{...d})}):n(d)}export{x as default,o as frontmatter};
